<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>elementui-table</title>
    <!-- <link rel="stylesheet" href="./element_ui/index.css"> -->
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="./vue.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="./axios.min.js"></script>
    <!-- <script src="./element_ui/index.js"></script> -->
</head>

<body>
    <div id="app">
        <el-row>
            <el-row>
                <el-button type="success" round style="margin-left:105px;" @click='addclick'>
                    新增
                </el-button>
            </el-row>
            <el-col :span="20" :offset="2" style="margin-top:10px;">
                <template>
                    <el-table :data="list" style="width: 100%" border stripe v-loading="loading">
                        <el-table-column prop="companyname" label="公司" width="180">
                        </el-table-column>
                        <el-table-column prop="job" label="岗位" width="180">
                        </el-table-column>
                        <el-table-column prop="phone" label="电话">
                        </el-table-column>
                        <el-table-column prop="latlang" label="坐标">
                        </el-table-column>
                        <el-table-column label="操作" width="170">
                            <template slot-scope="scope">
                                <el-button type="warning" size="mini" round @click='updateInterview(scope.row)'>修改</el-button>
                                <el-button type="danger" size="mini" @click="deletefunc(scope.row.id)"
                                    :loading='logdingl'>删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div style="margin-top: 20px;">
                        <el-pagination layout="prev, pager, next" :current-page='page' :total="count"
                            :page-size="pageSize" background @current-change="pageChangeFunc">
                        </el-pagination>
                    </div>

                </template>
            </el-col>
        </el-row>
        <!-- 新增（模态框） -->
        <el-dialog title="添加一个面试" :visible.sync="dialogFormVisible" :close-on-click-modal='false'>
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="公司名称">
                    <el-input v-model="form.companyname"></el-input>
                </el-form-item>
                <el-form-item label="岗位">
                    <el-input v-model="form.job"></el-input>
                </el-form-item>
                <el-form-item label="电话">
                    <el-input v-model="form.phone"></el-input>
                </el-form-item>
                <el-form-item label="经纬度">
                    <el-input v-model="form.latlang"></el-input>
                </el-form-item>
                <el-form-item label="平台邀约">
                    <el-select v-model="form.plat" placeholder="请选择平台">
                        <el-option label="拉勾网" value="1"></el-option>
                        <el-option label="前程无忧" value="2"></el-option>
                        <el-option label="boss直聘" value="3"></el-option>
                        <el-option label="智联招聘" value="4"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="约定时间">
                    <el-date-picker value-format="yyyy-MM-dd HH:mm" v-model="form.timeview" type="datetime"
                        placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item> 
                <el-form-item label="主动投递">
                    <el-radio-group v-model="form.isnative">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="2">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="约谈概要">
                    <el-input type="textarea" v-model="form.info"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click='addInterview'>立即添加</el-button>
                    <el-button @click='dialogFormVisible=false'>取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!-- 修改（模态框） -->
        <el-dialog title="修改一个面试" :visible.sync="updateVisible" :close-on-click-modal='false'>
            <el-form ref="updateform" :model="updateform" label-width="80px">
                <el-form-item label="公司名称">
                    <el-input v-model="updateform.companyname"></el-input>
                </el-form-item>
                <el-form-item label="岗位">
                    <el-input v-model="updateform.job"></el-input>
                </el-form-item>
                <el-form-item label="电话">
                    <el-input v-model="updateform.phone"></el-input>
                </el-form-item>
                <el-form-item label="经纬度">
                    <el-input v-model="updateform.latlang"></el-input>
                </el-form-item>
                <el-form-item label="平台邀约">
                    <el-select v-model="updateform.plat" placeholder="请选择平台">
                        <el-option label="拉勾网" :value="1"></el-option>
                        <el-option label="前程无忧" :value="2"></el-option>
                        <el-option label="boss直聘" :value="3"></el-option>
                        <el-option label="智联招聘" :value="4"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="约定时间">
                    <el-date-picker value-format="yyyy-MM-dd HH:mm" v-model="updateform.timeview" type="datetime"
                        placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="主动投递">
                    <el-radio-group v-model="updateform.isnative">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="2">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="约谈概要">
                    <el-input type="textarea" v-model="updateform.info"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click='updatesu'>确定</el-button>
                    <el-button @click='updateVisible=false'>取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>

    <script>
        let app = new Vue({
            el: "#app",
            data: {
                list: [],
                loading: false,
                page: 1,
                pageSize: 3, //页尺寸
                count: 0,
                logdingl: false,
                dialogFormVisible: false,//新增对话框
                updateVisible:false,//修改对话框
                form: {//新增对话框数据
                    companyname: '',
                    job: '',
                    phone: '',
                    latlang: '',
                    plat: null,
                    timeview: '',
                    isnative: null,
                    info: ''
                },
                updateform: {//修改对话框数据
                    companyname: '',
                    job: '',
                    phone: '',
                    latlang: '',
                    plat: null,
                    timeview: '',
                    isnative: null,
                    info: ''
                },
            },
            mounted() {
                //this.getViewAll() //调用所有列表方法
                this.getListByPage(this.page, this.pageSize);
            },
            methods: {

                //获取分页列表
                getListByPage(page, pageSize) {
                    this.loading = true
                    axios.get('http://39.106.207.209:8100/interview/getInterviewList/' + page + '/' + pageSize).then(res => {
                        // console.log(res.data);
                        this.list = res.data.data;
                        this.count = res.data.total;
                        this.loading = false;
                    }).catch(() => {
                        this.loading = false
                    })
                },
                //当分页组件的页数发生改变时触发的事件方法
                //注意，默认传入了一个event参数
                pageChangeFunc(event) {
                    console.log(event)
                    this.getListByPage(event, this.pageSize);
                },


                // 获取所有列表
                getViewAll() {
                    this.loading = true
                    axios.get('http://39.106.207.209:8100/interview/getInterviewAll').then(res => {
                        console.log(res.data.data);
                        this.list = res.data.data
                        this.loading = false
                    }).catch(() => {
                        this.loading = false
                    })
                },
                handleClick(id) {
                    // console.log(id);
                },
                //删除
                deletefunc(id) {
                    this.logdingl = true;
                    this.$message.closeAll()
                    this.$confirm('此操作将永久删除该数据, 是否继续？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        axios.delete('http://39.106.207.209:8100/interview/deleteInterviewById/' + id).then(res => {
                            this.getViewAll()
                            this.logdingl = false;
                        })
                    }).catch(() => {
                        this.logdingl = false;
                    })

                },

                // 新增一个面试
                addclick() {
                    this.dialogFormVisible = true;
                },
                addInterview() {
                    axios.post('http://39.106.207.209:8100/interview/addInterview', this.form).then(res => {
                        // console.log(res);
                        this.getListByPage(this.page, this.pageSize);
                        this.dialogFormVisible = false
                    })
                },
                // 修改
                updateInterview(row){
                   this.updateVisible=true;//修改对话框
                   this.updateform = row
                   console.log(row);
                },
                updatesu(){

                }

            }
        })
    </script>




</body>

</html>